<!-- 图文导航 -->
<template>
  <div class="drag-nav-bar">
    <div :style="{ backgroundColor }" class="drag-nav-bar-wrapper">
      <div :style="{ width: `${(100 / rowCount)}%` }" class="drag-nav-bar-item" v-for="(item, index) in items(0)" :key="'0' + index">
        <div class="image">
          <img v-if="item.imgSrc" :src="item.imgSrc" alt="">
          <icon-font type="icon-tupian1" v-else />
        </div>
        <div :style="{ color: textColor }" class="title">{{ item.title }}</div>
      </div>
    </div>
    <div :style="{ backgroundColor }" class="drag-nav-bar-wrapper">
      <div :style="{ width: `${(100 / rowCount)}%` }" class="drag-nav-bar-item" v-for="(item, index) in items(1)" :key="'1' + index">
        <div class="image">
          <img v-if="item.imgSrc" :src="item.imgSrc" alt="">
          <icon-font type="icon-tupian1" v-else />
        </div>
        <div :style="{ color: textColor }" class="title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DraggableNavBar',
    props: ['list', 'backgroundColor', 'textColor', 'rowCount', 'total'],
    computed: {
      showTwoRow () {
        return this.list.length > this.rowCount
      }
    },
    methods: {
      items (row) {
        const { list, rowCount } = this
        return list.filter((item, index) => index < (row + 1) * rowCount && index >= row * rowCount)
      }
    }
  }
</script>

<style lang="less" scoped>
  .drag-nav-bar {
    width: 100%;
    .drag-nav-bar-wrapper {
      .drag-nav-bar-item {
        display: inline-block;
        height: 76px;
        box-sizing: border-box;
        background-color: transparent;
        text-align: center;
        .title {
          height: 30%;
          background-color: inherit;
        }
        .image {
          height: 70%;
          background-color: #FFFFFF;
          box-sizing: border-box;
          padding: 5px 10px;
          i {
            font-size: 50px;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
